<template>
  <div>
    <div class="xgtj">
      <div class="tjtit">相关推荐</div>
      <div class="tjcon">
        <ul>
          <van-swipe class="my-swipe" :autoplay="5000" indicator-color="red">
            <van-swipe-item>
              <li v-for="item1 in page1" :key="item1.GoodsID">
                <router-link
                  :to="{ name: 'details', params: { gid: item1.GoodsID } }"
                >
                  <img :src="imgUrl + item1.GoodsPic" />
                </router-link>

                <div class="name">
                  {{ item1.GoodsName }}
                </div>
                <div class="buy_wrap">
                  <span class="tip"></span
                  ><span class="price" id="guessPrice_tjwguess_3"
                    >¥<span class="int">{{ item1.GoodsPrice }}</span
                    >.00</span
                  >
                </div>
              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li v-for="item2 in page2" :key="item2.GoodsID">
                <router-link
                  :to="{ name: 'details', params: { gid: item2.GoodsID } }"
                >
                  <img :src="imgUrl + item2.GoodsPic" />
                </router-link>

                <div class="name">
                  {{ item2.GoodsName }}
                </div>
                <div class="buy_wrap">
                  <span class="tip"></span
                  ><span class="price" id="guessPrice_tjwguess_3"
                    >¥<span class="int">{{ item2.GoodsPrice }}</span
                    >.00</span
                  >
                </div>
              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li v-for="item3 in page3" :key="item3.GoodsID">
                <router-link
                  :to="{ name: 'details', params: { gid: item3.GoodsID } }"
                >
                  <img :src="imgUrl + item3.GoodsPic" />
                </router-link>

                <div class="name">
                  {{ item3.GoodsName }}
                </div>
                <div class="buy_wrap">
                  <span class="tip"></span
                  ><span class="price" id="guessPrice_tjwguess_3"
                    >¥<span class="int">{{ item3.GoodsPrice }}</span
                    >.00</span
                  >
                </div>
              </li>
            </van-swipe-item>
            <van-swipe-item>
              <li v-for="item4 in page4" :key="item4.GoodsID">
                <router-link
                  :to="{ name: 'details', params: { gid: item4.GoodsID } }"
                >
                  <img :src="imgUrl + item4.GoodsPic" />
                </router-link>

                <div class="name">
                  {{ item4.GoodsName }}
                </div>
                <div class="buy_wrap">
                  <span class="tip"></span
                  ><span class="price" id="guessPrice_tjwguess_3"
                    >¥<span class="int">{{ item4.GoodsPrice }}</span
                    >.00</span
                  >
                </div>
              </li>
            </van-swipe-item>
          </van-swipe>
        </ul>
      </div>
    </div>
    <div class="tab">
      <van-tabs v-model="activeName">
        <van-tab title="图文详情" name="a">
          <div class="tab_1">
            <lazy-component>
              <img
                v-for="img in $store.state.Introduction"
                :key="img.PicdetailsID"
                v-lazy="img.Picdetails"
              />
            </lazy-component>
          </div>
        </van-tab>
        <van-tab title="产品参数" name="b">
          <div class="canshu">
            <div class="canshu_1">
              <lazy-component>
                <img v-lazy="imgUrl + $store.state.Parameters" />
              </lazy-component>
            </div>
          </div>
        </van-tab>
        <van-tab title="热门推荐" name="c">
          <div class="likebox bort">
            <ul>
              <li v-for="item in goodList" :key="item.GoodsID">
                <router-link
                  :to="{ name: 'details', params: { gid: item.GoodsID } }"
                >
                  <lazy-component>
                    <img class="proimg" v-lazy="item.GoodsPic" />
                  </lazy-component>
                  <p class="tit">
                    <van-tag style="margin-right: 10px" color="#7232dd"
                      >自营</van-tag
                    >{{ item.GoodsName }}
                  </p>
                  <p class="price">
                    ￥{{ item.GoodsPrice }}<span>￥49.9</span
                    ><img
                      src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/f3.png"
                    />
                  </p>
                </router-link>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    goodList: Array,
  },
  data() {
    return {
      activeName: "a",
      showList: [],
      page1: [],
      page2: [],
      page3: [],
      page4: [],
    };
  },
  mounted() {
    // this.getGoodslist();
    // this.$store.commit('setDemoList')
  },
  created() {
    this.getRelevant();
  },
  methods: {
    async getRelevant() {
      const { data: res1 } = await this.$http.get("GetRecommended", {
        params: {
          page_num: 1,
          page_size: 6,
        },
      });
      const { data: res2 } = await this.$http.get("GetRecommended", {
        params: {
          page_num: 2,
          page_size: 6,
        },
      });
      const { data: res3 } = await this.$http.get("GetRecommended", {
        params: {
          page_num: 3,
          page_size: 6,
        },
      });
      const { data: res4 } = await this.$http.get("GetRecommended", {
        params: {
          page_num: 4,
          page_size: 6,
        },
      });
      this.page1 = res1.data;
      this.page2 = res2.data;
      this.page3 = res3.data;
      this.page4 = res4.data;
    },
  },
};
</script>
<style lang="less" scoped>
.xgtj {
  padding: 0 0.6rem;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-top: 0.625rem;
  .tjtit {
    font-size: 1rem;
    color: #333;
    height: 2.2rem;
    line-height: 2.2rem;
    border-bottom: 1px solid #eee8e8;
  }
  .tjcon {
    padding: 0 0 0.6rem 0;
    ul {
      overflow: hidden;
      li {
        float: left;
        width: 32%;
        margin-right: 1%;
        margin-top: 7px;
        position: relative;
        img {
          border-radius: 6px;
        }

        .name {
          padding: 7px 0 0;
          // height: 3em;
          line-height: 1.5em;
          color: #333;
          font-size: 12px;
          font-weight: 400;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .buy_wrap {
          position: relative;
          height: 36px;
          line-height: 26px;
          .price {
            font-family: JDZH-Regular;
            color: #f2270c;
            font-size: 13px;
            .int {
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
.tab {
  margin-top: 15px;
  .tab_1 {
    width: 100%;
    img {
      width: 100%;
      vertical-align: bottom;
    }
  }
}
.canshu {
  padding: 0 0.8rem;
  .canshu_1 {
    width: 100%;
    border-bottom: 1px solid #eee;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.8rem;
    .pl {
      color: #999;
      float: left;
      width: 32%;
      overflow: hidden;
    }
    .pr {
      float: left;
      color: #999;
      width: 60%;
      overflow: hidden;
    }
  }
}
.likebox.bort {
  border-top: 0;
  ul {
    overflow: hidden;
    li {
      float: left;
      width: 47%;
      margin-left: 8px;
      margin-top: 10px;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      box-sizing: border-box;
      overflow: hidden;
      background: #fff;
      a {
        display: block;
        padding: 0.5rem;
        .proimg {
          width: 100%;
        }
      }
      .tit {
        height: 2.5rem;
        font-size: 0.8rem;
        padding-top: 0.5rem;
        color: #333;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        color: #ee0a24;
        padding-top: 0.5rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 1rem;
        font-weight: 600;
        span {
          padding-left: 1rem;
          color: #999;
          text-decoration: line-through;
          font-size: 0.7rem;
          height: 1rem;
          line-height: 1rem;
        }
        img {
          float: right;
        }
      }
    }
  }
}
</style>